<template>
  <div class="question-edit">
    <p>#{{ id }}</p>
    <!-- 题目类型 -->
    <type-select v-model="form.type_id" />

    <!-- 形式选择 -->
    <mu-sub-header>题目形式</mu-sub-header>
    <mu-divider />
    <div class="form-style">
      <mu-radio v-model="form.style" class="form-style-item" :value="0" label="选择题"></mu-radio>
      <mu-radio v-model="form.style" class="form-style-item" :value="1" label="填空题"></mu-radio>
    </div>

    <!-- 题干 -->
    <mu-sub-header>题干</mu-sub-header>
    <mu-divider />
    <mu-text-field v-model="form.text" full-width placeholder="请在这里输入题干" multi-line :rows="1" :rows-max="3"></mu-text-field>

    <!-- 图片 -->
    <mu-sub-header>图片</mu-sub-header>
    <mu-divider />
    <p>点击下面的按钮进入图片编辑，此页内容将不会保存</p>
    <mu-button color="orange" full-width @click="toEditImage()">编辑图片</mu-button>
    <!-- <image-input v-model="form.image" /> -->

    <!-- 选项 -->
    <options-input v-if="form.style === 0" ref="optionsInput" v-model="form.options" />

    <!-- 答案 -->
    <mu-sub-header>答案</mu-sub-header>
    <mu-divider />
    <mu-text-field v-if="form.style === 1" v-model="form.answer" full-width placeholder="请在这里输入答案" multi-line :rows="1" :rows-max="3"></mu-text-field>
    <answer-select v-else v-model="form.answer" :options="form.options" />

    <!-- 确定 -->
    <mu-button full-width color="success" @click="saveChanges()">保存修改</mu-button>
  </div>
</template>

<script>
import api from '@/api'
import TypeSelect from '@/components/TypeSelect'
import OptionsInput from '@/components/OptionsInput'
import AnswerSelect from '@/components/AnswerSelect'
import { checkModifyBeforeLeave } from '@/mixins'

export default {
  name: 'QuestionEdit',
  components: {
    TypeSelect,
    AnswerSelect,
    OptionsInput
  },
  mixins: [
    checkModifyBeforeLeave
  ],
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      form: {
        type_id: 0,
        style: 0,
        text: '',
        options: [],
        answer: ''
      },
      validErrors: [],
      validWarnings: [],
      commit: 0,
      last: ''
    }
  },
  computed: {
    modified() {
      return this.last === JSON.stringify(this.form)
    }
  },
  created() {
    this.getQuestion()
  },
  methods: {
    // 获取题目
    async getQuestion() {
      try {
        const data = await api.getQuestion(this.id)
        this.form.type_id = data.type_id
        this.form.style = data.style
        this.form.text = data.text
        this.form.options = data.options
        this.form.answer = data.answer
        this.last = JSON.stringify(this.form)
      } catch (err) {
        this.$apiCatch(err)
      }
    },
    // 跳转至编辑图片
    toEditImage() {
      this.$router.push({
        name: 'question-edit-image',
        params: {
          id: this.id
        }
      })
    },
    // 保存更改
    async saveChanges() {
      try {
        const { type_id, style, text, options, answer } = this.form
        const finalOptions = style === 0 ? options : []
        await api.editQuestion(this.id, { type_id, style, text, options: finalOptions, answer, commit: null })
        this.$toast.success('保存成功')
      } catch (err) {
        this.$apiCatch(err)
      }
    }
  }
}
</script>

<style scoped>
.question-edit {
  margin: 0 auto;
  width: 500px;
  padding: 12px;
}

.is-phone .question-edit {
  width: 100%;
}
</style>
